<template>
	<div class="royalty">
		<div style="display: flex;justify-content: space-between;">
			<div style="display: flex;">
				<el-date-picker v-model="selectDate" :type="dateType" :clearable="false"
					placeholder="选择日期" @change="changeDate">
				</el-date-picker>
				<el-select v-model="dateType" style="width: 80px;" @change="changeType">
					<el-option value="year" label="年"></el-option>
					<el-option value="month" label="月"></el-option>
				</el-select>
			</div>
			<div style="display: flex">
				<el-select v-model="roleId"
					@change="selectRoleIdChange" style="width: 150px;">
					<el-option label="管理员" :value="1"></el-option>
					<el-option label="业务员" :value="3"></el-option>
					<el-option label="售后员" :value="7"></el-option>
				</el-select>
				<el-button style="margin-left: 10px;" @click="rest">重置</el-button>
			</div>
		</div>
		<div class="table-data">
			<el-table :data="tableData" v-loading="loading" border stripe
				style="width: 100%" height="100%">
				<el-table-column prop="ranking" label="排名" fit></el-table-column>
				<el-table-column prop="nickName" label="姓名" fit></el-table-column>
				<el-table-column prop="percentage" label="提成点" fit></el-table-column>
				<el-table-column prop="total" label="订单数" fit></el-table-column>
				<el-table-column prop="salesAmount" label="销售金额" fit></el-table-column>
				<el-table-column prop="collectionAmount" label="回款金额" fit>
				</el-table-column>
				<el-table-column prop="totalAmount" label="发放金额" fit></el-table-column>
			</el-table>
		</div>

	</div>
</template>

<script>
	import orderApi from "../../api/order.js";
	import userApi from "../../api/user.js";
	export default {
		data() {
			return {
				roleId: 3,
				year: null,
				yearMonth: null,
				dateType: 'month',
				loading: false,
				tableData: [],
				selectDate: null,
			}
		},
		created() {
			this.initDate();
			this.getOrderRoyalty();
		},
		methods: {
			initDate(){
				const currentYear = new Date().getFullYear();
				let currentMonth = new Date().getMonth() + 1;
				if (currentMonth < 10) {
					currentMonth = '0' + currentMonth;
				}
				this.selectDate = `${currentYear}-${currentMonth}`;
				this.yearMonth = this.selectDate;
			},
			// 获取订单提成列表
			getOrderRoyalty() {
				this.loading = true
				const data = {
					roleId: this.roleId,
					year: this.year,
					yearMonth: this.yearMonth,
				}
				orderApi.orderRoyalty(data).then(res => {
					if (res.code === 200) {
						this.tableData = res.data
						this.loading = false
					}
				})
			},
			changeDate(){
				//console.log("选择的日期==>",this.selectDate)
				this.year = null;
				this.yearMonth = null;
				if (this.selectDate !== null) {
					const year = this.selectDate.getFullYear();
					const month = this.selectDate.getMonth() + 1; // 月份从 0 开始，需要加 1
					// 格式化月份，确保始终是两位数
					const formattedMonth = month < 10 ? '0' + month : month;
					if (this.dateType === "year") {
						this.year = year;
					} else if (this.dateType === "month") {
						this.yearMonth = `${year}-${formattedMonth}`;
					}
				}
				this.getOrderRoyalty();
			},
			selectRoleIdChange(){
				this.getOrderRoyalty();
			},
			rest(){
				this.initDate();
				this.yearMonth = this.selectDate;
				this.roleId = 3;
				this.getOrderRoyalty();
			},
			changeType(){
				this.selectDate = new Date();
				this.changeDate();
			}
		}
	}
</script>

<style scoped>
	.royalty {
		height: 100%;
	}
	
	.table-data {
		height: 94%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		margin-top: 10px;
	}
</style>